import React, {PureComponent} from 'react';
import classNames from 'classnames';
import {Menu} from 'antd';
import Link from 'umi/link';
import {urlToList} from '@/utils/pathUtils';
import {getMenuMatches, getIcon} from './SiderMenuUtils';
const {SubMenu} = Menu;

export default class BaseMenu extends PureComponent {
    //获得菜单子节点
    getNavMenuItems = menusData => {
        if (!menusData) {
            return [];
        }
        return menusData
            .filter(item => item.name && !item.hideInMenu)
            .map(item => this.getSubMenuOrItem(item))
            .filter(item => item);
    };

    // Get the currently selected menu
    getSelectedMenuKeys = pathname => {
        const {flatMenuKeys} = this.props;
        return urlToList(pathname).map(itemPath => getMenuMatches(flatMenuKeys, itemPath).pop());
    };

    //get SubMenu or Item
    getSubMenuOrItem = item => {
        // doc: add hideChildrenInMenu
        if (item.children && !item.hideChildrenInMenu && item.children.some(child => child.name)) {
            const {name} = item;
            return (
                <SubMenu
                    title={
                        item.icon ?
                            (<span>{getIcon(item.icon)}<span>{name}</span></span>) :
                            (name)}
                    key={item.path} >
                    {this.getNavMenuItems(item.children)}
                </SubMenu>
            );
        }
        return <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>;
    };

    /**
     * 判断是否是http链接.返回 Link 或 a
     * Judge whether it is http link.return a or Link
     * @memberof Index
     */
    getMenuItemPath = item => {
        const {name} = item;
        const itemPath = this.conversionPath(item.path);
        const icon = getIcon(item.icon);
        const {target} = item;
        // Is it a http link
        if (/^https?:\/\//.test(itemPath)) {
            return (
                <a href={itemPath} target={target}>
                    {icon}
                    <span>{name}</span>
                </a>
            );
        }
        const {location, isMobile, onCollapse} = this.props;
        return (
            <Link
                to={itemPath}
                target={target}
                replace={itemPath === location.pathname}
                onClick={isMobile ? () => {onCollapse(true);} : undefined}>
                {icon}
                <span>{name}</span>
            </Link>
        );
    };

    conversionPath = path => {
        if (path && path.indexOf('http') === 0) {
            return path;
        }
        return `/${path || ''}`.replace(/\/+/g, '/');
    };

    render() {
        const {
            openKeys,
            theme,
            mode,
            location: {pathname},
            className,
            collapsed,
        } = this.props;
        let selectedKeys = this.getSelectedMenuKeys(pathname);
        if (!selectedKeys.length && openKeys) {
            selectedKeys = [openKeys[openKeys.length - 1]];
        }
        let props = {};
        if (openKeys && !collapsed) {
            props = {
                openKeys: openKeys.length === 0 ? [...selectedKeys] : openKeys,
            };
        }
        const cls = classNames(className, {
            'top-nav-menu': mode === 'horizontal',
        });
        return (
            <Menu
                key="Menu"
                mode={mode}
                theme={theme}
                className={cls}
                selectedKeys={selectedKeys}
                onOpenChange={this.props.onOpenChange}
                onSelect={this.props.onSelect}
                {...props}
            >
                {this.getNavMenuItems(this.props.menuData)}
            </Menu>
        );
    }
}
